TypeScript İleri Seviye Tipler: Şablon Dizi ve Koşullu Tiplerde Uzmanlaşma

Uluslararası Örnek: Farklı Tarih Formatlarını Yönetme

Dünyanın farklı bölgeleri farklı tarih formatları kullanır. Bu farklılıkları yönetmek için koşullu tipleri kullanabilirsiniz.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (Uygulama farklı tarih formatlarını işleyecektir)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Geçersiz tarih formatı");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Tip: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Tip: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Tip: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Orada olacağını bilerek yıla erişim

Bu örnek, belirtilen tarih formatına göre farklı tarih ayrıştırma fonksiyonları tanımlamak için koşullu tipleri kullanır. ParseDate tipi, döndürülen nesnenin formata göre doğru özelliklere sahip olmasını sağlar.

Şablon Dizi ve Koşullu Tipleri Birleştirme

Asıl güç, şablon dizi tipleri ve koşullu tipleri birleştirdiğinizde ortaya çıkar. Bu, inanılmaz derecede güçlü tip manipülasyonlarına olanak tanır.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // Gösterim için basitleştirilmiştir
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


//Tip alan örnek fonksiyon
function processEvent(event: T): ExtractEventPayload {
    //Gerçek bir uygulamada, olayı gerçekten gönderirdik.
    console.log(`İşlenen olay ${event}`);

    //Gerçek bir uygulamada, payload olay tipine bağlı olurdu.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//Dönüş tiplerinin çok spesifik olduğuna dikkat edin:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//Başka dizeler kullanırsanız, never alırsınız:
// const someOtherEvent = processEvent("someOtherEvent"); // Tip `never` olur

En İyi Uygulamalar ve Dikkat Edilmesi Gerekenler

• Keep it Simple: Güçlü olsalar da, bu ileri seviye tipler hızla karmaşıklaşabilir. Anlaşılırlık ve sürdürülebilirlik için çaba gösterin.
• Test Thoroughly: Kapsamlı birim testleri yazarak tip tanımlarınızın beklendiği gibi davrandığından emin olun.
• Document Your Code: Kod okunabilirliğini artırmak için ileri seviye tiplerinizin amacını ve davranışını açıkça belgeleyin.
• Consider Performance: İleri seviye tiplerin aşırı kullanımı derleme süresini etkileyebilir. Kodunuzu profilleyin ve gerektiğinde optimize edin.